<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      body {
        font-size: 13px;
      }

      .divShow {
        line-height: 32px;
        height: 32px;
        background-color: #eee;
        width: 280px;
        padding-left: 10px;
        margin: 0 auto;
      }

      .divShow span {
        padding-left: 50px;
      }

      .dialog {
        width: 360px;
        border: solid 5px #666;
        position: absolute;
        display: none;
        z-index: 101;
      }

      .dialog .title {
        background-color: #fbaf15;
        padding: 10px;
        color: #fff;
        font-weight: bold;
      }

      .dialog .title img {
        float: right;
      }

      .dialog .content {
        background-color: #fff;
        padding: 25px;
        height: 60px;
      }

      .dialog .content img {
        float: left;
      }

      .dialog .content span {
        float: left;
        padding-top: 10px;
        padding-left: 10px;
      }

      .dialog .bottom {
        text-align: right;
        padding: 10px 10px 10px 0px;
        background-color: #eee;
      }

      .mask {
        width: 100%;
        height: 100%;
        background-color: #000;
        position: absolute;
        top: 0px;
        left: 0px;
        filter: alpha(opacity=30);
        display: none;
        z-index: 100;
      }

      .btn {
        border: #666 1px solid;
        padding: 2px;
        width: 65px;
        filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#ECE9D8);
      }
    </style>
  </head>
  <body>
    <!-- 数据显示 -->
    <div class="divShow">
      <input type="checkbox" id="checkbox1" />
      <a href="#">这是一条可删除的数据</a>
      <span>
        <input type="button" id="button1" value="删除" class="btn" />
      </span>
    </div>
    <!-- 遮罩 -->
    <div class="mask"></div>
    <!-- 删除对话框 -->
    <div class="dialog">
      <div class="title">
        <img
          class="close"
          src="./images/close.gif"
          alt="点击可以关闭"
        />删除时提示
      </div>
      <div class="content">
        <img src="./images/delete.jpg" />
        <span>您真的要删除吗?</span>
      </div>
      <div class="bottom">
        <input
          type="button"
          id="button3"
          class="btn"
          value="确定"
        />&nbsp;&nbsp;
        <input type="button" id="button4" class="btn" value="取消" />
      </div>
    </div>
  </body>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script>
  <script>
    //对话框动态居中
    function showDialog() {
      var objW = $(window);
      var objC = $(".dialog");
      //窗口的宽高
      var brsW = objW.width();
      var brsH = objW.height();
      //滚动条的距离
      var sclL = objW.scrollLeft();
      var sclT = objW.scrollTop();
      //对话框的宽高
      var curW = objC.width();
      var curH = objC.height();

      var left = sclL + (brsW - curW) / 2;
      var top = sclT + (brsH - curH) / 2;

      objC.css({
        left: left,
        top: top,
      });
    }
    //改变窗口大小时对话框动态居中
    $(window).resize(function () {
      //如果对话框没有显示，则不操作该对话框
      if ($(".dialog").is(":visible")) {
        showDialog();
      }
      return;
    });
    //单击“删除”按钮弹出对话框
    $("#button1").click(function () {
      $(".dialog").show();
      $(".mask").show();
      showDialog();
    });
    //单击右上角的“X”图标,或“取消”按钮，执行关闭对话框和遮罩
    $(".close,#button4").click(function () {
      $(".dialog").hide();
      $(".mask").hide();
    });
    //单击“确定”按钮，删除并关闭对话框和遮罩
    $("#button3").click(function () {
      if ("input:checked".length != 0) {
        $(".divShow").remove();
      }
      $(".dialog").hide();
      $(".mask").hide();
    });
  </script>
</html>
